<!DOCTYPE html>
<html lang="en">

<head>
	<link rel="stylesheet" href="/cesium/Widgets/widgets.css">
	<script src="/cesium/Cesium.js"></script>

	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>mvt-imagery-provider-example</title>
	<link rel="stylesheet" href="/assets/index-eef9b33e.css">

	<!-- cesium and mvt-basic-render must import before MVTImageProvider  -->
	<script src="mvt-basic-render.js"></script>
	<script src="MVTImageryProvider.js"></script>

</head>

<body>
	<div id="cesiumContainer"></div>

	<script>

		const tdt = "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6cb47a67c43c66a4541922ec217e16a7";
		const tdtProvider = new Cesium.UrlTemplateImageryProvider({
			url: tdt
		});
		const viewer = new Cesium.Viewer('cesiumContainer', {
			baseLayer: Cesium.ImageryLayer.fromProviderAsync(tdtProvider, {}),
			baseLayerPicker: false,
			animation: false,
			fullscreenButton: false,
			geocoder: false,
			homeButton: false,
			selectionIndicator: true,
			timeline: false,
			navigationHelpButton: false,
			shouldAnimate: true,
			useBrowserRecommendedResolution: false,
			orderIndependentTranslucency: false,
		});

		//https://api.maptiler.com/maps/0199f0a1-6358-7a4a-a584-027c24bd7c28/style.json?key=FwOob0DpiVy24Gdvy72c
		//https://demotiles.maplibre.org/style.json
		MVTImageryProvider.fromUrl(
			'basic.json')
			.then(provider => {
				console.log("provider");
				console.log(provider);
				const imageryLayer = viewer.imageryLayers.addImageryProvider(provider);
			});

	</script>
</body>

</html>